import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import Vant from 'vant'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import { useIntersectionObserver } from '@vueuse/core'

import App from './App.vue'
import router from './router'
import 'vant/lib/index.css'
import { Lazyload } from 'vant'

const pinia = createPinia()
const app = createApp(App)
pinia.use(piniaPluginPersistedstate);
app.use(ElementPlus)
app.use(createPinia())
app.use(router)
app.use(Lazyload)
app.use(Vant)

app.use(pinia)
app.use(Lazyload, {
  lazyComponent: true,
});

app.directive('img-lazy', {
  mounted(el, binding) {
    el.url = binding.value
    el.src = 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png'
    var obs = new IntersectionObserver((arr, observer) => {
      arr.forEach(item => {
        var img = item.target
        if (item.isIntersecting) {
          img.src = img.url
          observer.unobserve(img)
        }
      })
    })
    obs.observe(el)
  }
})

app.directive('error', {
  mounted(el) {
    el.onerror = () => {
      el.src = 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png'
    }
  }
})
app.mount('#app')